<!--仿真详情-->
<template>
  <div class="detailsClass">
    <div class="topClass">
      <a-page-header
        @click="hearderClick"
        class="headerClass"
        title="返回上一级"
        @back="hearderClick"
      />
    </div>
    <a-card class="upClass" v-if="showOne">
      <div class="div1">{{ experimentData.emName }}</div>
      <div class="div2">所属专业类：{{ experimentData.majorClassification }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        对应专业：{{ experimentData.majorName }}
      </div>
      <div class="div3">
        {{ experimentData.brief }}
      </div>
      <a-button type="primary" class="buttonClass" @click="experimentalize(experimentData)">我要做实验</a-button>
    </a-card>
    <a-card class="bottomClass" v-if="showOne">
      <span class="div4">实验简介</span>
      <a-divider/>
      <div class="showHtmlClass" v-html="showHtml"></div>
    </a-card>
    <div v-if="showIframe"
         class="iframeClass">
      <iframe
        id="unity-infame"
        ref="iframeDom"
        v-bind:src="webSrc"
        frameborder="0"
        scrolling="no"
        style="margin-top: -10px"
        width="100%" height="100%"/>
    </div>
  </div>
</template>
<script>
import {defineComponent, toRaw,ref} from 'vue';
import router from "@/route";
import {useRoute} from 'vue-router';
import {detailsOfIndividualExperiments, editCount, eicEdit, filtrate} from "@/api/module/experiment";

export default defineComponent({
  setup() {
    const showHtml = ref('')
    const showOne = ref(true)
    const count = ref(0)
    const showIframe = ref(false)
    const experimentData = ref({})
    const webSrc = ref("")
    // 获取父组件传过来的ID
    const routers = useRoute();
    const id = JSON.parse(routers.query.id);

    const experimentalize = (value) => {
      console.log("实验基本信息：",toRaw(value))
      let newVar =  count.value++;
      let param = {
        id:value.id,
        testcount : newVar
      }
      editCount(toRaw(param));
      window.open(value.webglAddress)
      // showOne.value = !showOne.value
      // console.log("点击*******************")
      // showIframe.value = true
      // webSrc.value = value
      // if (value == 0) {
      //   webSrc.value = "http://192.168.0.145:9292/resource/resource/2022/06/10/28WeiHuaShaLaYinYuJuan/index.html"
      // } else if (value == 1) {
      //   webSrc.value = "/static/18LaoCuShengRen/index.html"
      // } else if (value == 2) {
      //   webSrc.value = "/static/Web_HR/index.html"
      // }
    }

    // 返回上一级
    const hearderClick = () => {
      if (showIframe.value) {
        showOne.value = !showOne.value
        showIframe.value = false
      } else {
        router.go(-1)
      }
    }
    const getDateList = () => {
      detailsOfIndividualExperiments({"id": id}).then((response) => {
        experimentData.value = response.data
        showHtml.value = response.data.description
        count.value = experimentData.value.testcount
      })
    }
    getDateList()
    return {
      showHtml,
      experimentData,
      showOne,
      webSrc, // webGL路径
      showIframe, // webGL是否展示
      hearderClick,
      experimentalize,
    }
  }

});
</script>
<style scoped>
.detailsClass {
  width: 100%;
  height: 100%;
  float: left;
}

.topClass {
  /*style="border: 1px solid rgb(235, 237, 240)"*/
  width: 80%;
  margin-left: 10%;
  background-color: white;
  margin-top: 1%;
}

.upClass {
  width: 80%;
  margin-left: 10%;
  background-image: url("712667c2346d827f9e7d92940d9a605.png");
  background-size: cover;
  margin-top: 1%;
}

.headerClass {
  width: 13%;
}

.headerClass:hover {
  cursor: pointer;
}

.div1 {
  font-size: 30px;
  color: white;
  margin-left: 1%;
  margin-top: 2%;
}

.div2 {
  font-size: 15px;
  color: #D3D2D7;
  margin-left: 1%;
  margin-top: 1%;
}

.div3 {
  font-size: 15px;
  color: white;
  margin-left: 1%;
  margin-top: 1%;
}

.buttonClass {
  margin-left: 1%;
  margin-top: 1%;
  margin-bottom: 2%;
  background-color: #2d8cf0;
  color: white;
}


.bottomClass {
  width: 80%;
  margin-left: 10%;
  background-color: white;
  margin-top: 2%;
}
.showHtmlClass{
  width: 100%;
  background-color: white;
  font-size: 20px;
  max-width: 100%;
}
.showHtmlClass img {
  border-style: none;
  width: 100%;
}
.showHtmlClass video {
  border-style: none;
  width: 100%;
}

.div4 {
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  margin-left: 1%;
  margin-top: 10%;
}

.iframeClass {
  float: left;
  width: 80%;
  height: 900px;
  margin-left: 10%;
  background-color: white;
  margin-top: 1.5%;
}
</style>
<style>
.showHtmlClass{
  width: 100%;
  background-color: white;
  font-size: 20px;
  max-width: 100%;
}
.showHtmlClass * {
  border-style: none;
  width: 100%;
}

</style>
